<template>
	<view class="page">
		<navigation textColor="#333333" barColor="#333333" defaultButton="back">企业认证</navigation>
		<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true">
			<view class="page_main">
				<form-input :disabled="true" name="公司名称" v-model="model.name" placeholder="--"></form-input>
				<form-input :disabled="true" name="法人姓名" v-model="model.corpName" placeholder="--"></form-input>
				<form-input :disabled="true" name="法人身份证号" v-model="model.corpId" placeholder="--"></form-input>
				<view class="form-item mask_line">
					<view class="form-item__name">公司介绍</view>
					<view class="form-item__value">
						<textarea class="form-item__value-input left_input" v-model="model.companyDetails" placeholder-class="form-item__value-input-placeholder"
						 placeholder="请输入公司介绍～" />
						</view>
				</view>
				<view class="form-item">
					<view class="form-item__name">公司宣传照片</view>
					<view class="form-item__value">
					</view>
				</view>
				<view class="cu-form-group photo_panel">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in model.images" :key="index" @tap="ViewImage" :data-url="model.images[index]">
						 <image :src="model.images[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="model.images.length<uploadFileNum">
							<!-- <text class='cuIcon-cameraadd'></text> -->
							<image class="form-item__value-image" src="/static/images/photo_bg.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="photo_hint">建议尺寸：750*500</view>
				<view class="collapse">
					<view class="collapse_title" @tap="collapseFlagChange">
						<view class="left_bar">认证信息</view>
						<view class="right_bar">展开<text class="nursing-icon iconxiala"></text></view>
					</view>
					<view class="collapse_content" v-if="collapseFlag">
						<view class="collapse_hinttitle">营业执照</view>
						<image class="collapse_image" :src="model.companyImg" mode=""></image>
						<view class="collapse_hinttitle">证件正面</view>
						<image class="collapse_image" :src="model.picCorpZheng" mode=""></image>
						<view class="collapse_hinttitle">证件反面</view>
						<image class="collapse_image" :src="model.picCorpFan" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<button class="page_btn" hover-class="page_btn-hover" @tap="submit">确认提交</button>
	</view>
</template>

<script>
	import * as orgApi from '@/api/orgApi/org.js';
	import { HTTP_SERVER_URL } from '@/config';
	export default {
		data() {
			return {
				HTTP_SERVER_URL,
				model: {
					name:'',
					companyDetails: '',
					images: []
				},
				collapseFlag: false,
				uploadFileNum: 4
			};
		},
		created() {
			this.getOrgMsg();
		},
		methods: {
			submit(){
				orgApi
					.updateOrgMsg(this.model)
					.then(res => {
						if (res.code === 0) {
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 1000
							});
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			},
			getOrgMsg(){
				orgApi
					.getOrgMsg()
					.then(res => {
						if (res.code === 0) {
							this.model = res.data;
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			},
			collapseFlagChange(){
				this.collapseFlag = !this.collapseFlag;
			},
			//选择图片
			ChooseImage() {
				let uploadFileLength = parseInt(this.uploadFileNum - this.model.images.length);
				uni.chooseImage({
					count: uploadFileLength, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						for (var i = 0; i<res.tempFilePaths.length; i++) {
							let url = '/institute/service-image/addImage';
							// #ifdef APP-PLUS || MP-WEIXIN
							url = HTTP_SERVER_URL + url;
							// #endif
							uni.uploadFile({
								url,
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: uploadRes => {
									this.model.images.push(JSON.parse(uploadRes.data).data);
								},
								fail: uploadErr => {
									uni.showToast({
										title: '上传失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						}
					} 
				});
			},
			//预览图片
			ViewImage(e) {
				uni.previewImage({
					urls: this.model.images,
					current: e.currentTarget.dataset.url
				});
			},
			//删除图片
			DelImg(e) {
				uni.showModal({
					title: '删除照片',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.model.images.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
		}
	}
</script>

<style lang="stylus">
	.page_scroll {
		position absolute;
		top calc(120rpx + var(--status-bar-height));
		right 0rpx;
		bottom 120rpx;
		left 0rpx;
	}
	.page_btn {
		position absolute;
		bottom 30rpx;
		right 30rpx; 
		left 30rpx;
	}
	.collapse {
		width 100%;
		margin-top 100rpx;
		
		.collapse_title {
			padding 0rpx 25rpx 0rpx 30rpx;
			box-sizing border-box;
			background-color rgba(247, 247, 247, 1);
			height 75rpx;
			width 100%;
			display flex;
			align-items center;
			justify-content space-between;
			border-radius: 10rpx;
			.left_bar {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #666666;
			}
			.right_bar {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				display flex;
				align-items center;
				.nursing-icon {
					margin-left 10rpx;
					color rgba(194, 194, 194, 1);
					font-size 20rpx;
				}
			}
		}
		.collapse_content {
			width 100%;
			.collapse_hinttitle {
				box-sizing border-box;
				height 70rpx;
				width 100%;
				display flex;
				align-items center;
				justify-content space-between;
				border-radius: 10rpx;
			}
			.collapse_image {
				width 100%;
				height 300rpx;
			}
		}
	}
	.page_main {
		padding 0rpx 30rpx;
		box-sizing border-box;
	}
	.mask_line {
		flex-direction column;
		position relative;
		box-sizing border-box;
		
		.form-item__name {
			width 100%;
			text-align left;
		}
		.form-item__value {
			width 100%;
			.form-item__value-input {
				width 100%;
				height 100rpx;
				margin 0rpx;
				padding 20rpx 0rpx; 
				text-align left;
				box-sizing border-box;
			}
			.form-item__value-input-placeholder {
				text-align left;
			}
		}
	}
	.cu-form-group {
		padding 0rpx !important;
	}
	.photo_panel .form-item__value-image {
		width 165rpx;
		height 165rpx;
	}
	.photo_hint {
		margin-top 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
</style>
